<template>
  <div class="pro-list">
    <ul>
      <li 
        v-for="product in products"
        :key="product.id">
        <span> {{ product.title }} - {{ product.price }} </span>
        <span> 数量： {{ product.inventory }} </span>
        <br>
        <el-button 
          type="danger" 
          icon="el-icon-goods" 
          :disabled="!product.inventory"
          @click="addProductToCart(product)"
          circle>    
        </el-button>
      </li>
    </ul>
    <div>
      <h3> 双向数据绑定 </h3>
      <input type="text" placeholder="请填写内容" v-model="itemF">
      {{ this.$store.state.products.itemF }}
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { PRODUCTS } from '../../store/mutation-types';
export default {
  computed: {
    itemF: {
      get: function () {
        return this.$store.state.products.itemF
      },
      set: function (newVal) {
        this.$store.commit(`products/${PRODUCTS.CHANGE_ITEMF}`, newVal)
      }
    },
    ...mapState({
      products: state => state.products.all,
    })
  },
  methods: mapActions('cart', [
    'addProductToCart'
  ]),
  created () {
    this.$store.dispatch('products/getAllProducts')
  }
}
</script>

<style lang="stylus">
  .pro-list {
    padding: 30px;
  }
</style>